<style scoped>
  .card-container{
    width: 570px;
    height: 570px;
    position: relative;
  }
  .card {
    width: 260px;
    height: 570px;
    background: black;
    border-radius: 14px;
    border: 2px solid rgb(40, 40, 40);
    position: absolute;
    top: 50%;
    left: 50%; 
    transform-origin: center center;
    box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.486);
  }

  .card-int {
    background-image: linear-gradient(to right bottom, #8e8989, #ff004431, #5a3e4b, #262225, #2c0334, #ffffff, #6a6878, #c1d9ff, #003d94, #002e66, #001d3a, #020812);
    background-size: 200% 200%;
    background-position: 0% 0%;
    height: 560px;
    border-radius: 14px;
    transition: all 0.6s ease-out;
    overflow: hidden;
    position: absolute;
    width: 250px;
    margin: 5px 3px;
  }

  .card:hover .card-int {
    background-position: 100% 100%;
  }

  .screen{
    
  }

  .top {
    position: absolute;
    top: 0px;
    right: 50%;
    transform: translate(50%, 0%);
    width: 35%;
    height: 18px;
    background-color: rgb(1, 1, 1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .speaker {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translate(50%, 0%);
    width: 40%;
    height: 2px;
    border-radius: 2px;
    background-color: rgb(20, 20, 20);
  }

  .camera {
    position: absolute;
    top: 6px;
    right: 84%;
    transform: translate(50%, 0%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.048);
  }

  .int {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    background-color: rgba(0, 0, 255, 0.212);
  }

  .btn1,
  .btn2,
  .btn3,
  .btn4 {
    position: absolute;
    width: 2px;
  }

  .btn1,
  .btn2,
  .btn3 {
    height: 45px;
    top: 30%;
    right: -4px;
    background-image: linear-gradient(
      to right,
      #111111,
      #222222,
      #333333,
      #464646,
      #595959
    );
  }

  .btn2,
  .btn3 {
    transform: scale(-1);
    left: -4px;
  }

  .btn2,
  .btn3 {
    transform: scale(-1);
    height: 30px;
  }

  .btn2 {
    top: 26%;
  }

  .btn3 {
    top: 36%;
  }

  .hello {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    height: 100%;
    transition: 0.5s ease-in-out;
  }

  .hidden {
    display: block;
    opacity: 0;
    transition: all 0.3s ease-in;
  }

  .card:hover .hidden {
    opacity: 1;
  }

  .card:hover .welcome {
    transform: translateY(-20px);
  }
</style>
<script setup lang="ts">
import useLoading from '@/hooks/loading'
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import useConnection from '../hooks/connection'
import InviteCode from './invite-code.vue'
import VideoPlayer from './video-player.vue'

const emits = defineEmits(['rttChanged'])

const cardRef = ref(null)
const stream = ref(null)
const rtt = ref(null)
const {loading, setLoading, toggle} = useLoading(false)
const showScreen = ref(false)
const rotation = ref(0) // 控制旋转角度
        // 控制容器样式
const cardStyle = ref({
  width: 260,
  height: 570
})
const screenRate = ref(2.25)

const streamRevd = (stm) => {
  console.log('触发了 stm', stm)
  stream.value = stm
  showScreen.value = true
  setLoading(false)
}

const rttRevd = (dt) => {
  rtt.value = dt
  emits('rttChanged', dt)
}

// 参数3：判断是否是竖屏
const orientationRevd = (dt) => {
  //    ROTATION_0 = 0;
  //    ROTATION_180 = 2;
  //    ROTATION_270 = 3;
  //    ROTATION_90 = 1;
  
  nextTick(()=>{
    rotation.value = dt
  })
}

const connection = useConnection(streamRevd, rttRevd, orientationRevd, ()=>setLoading(false))

const inviteCodeInputed = (data) => {
  console.log(data)
  connection.startJoin(data)
  setLoading(true)
}

const sendOpr = (data) => {
    connection.sendOpr(data)
}

const degChanged = (data) => {
    // 设置旋转角度

    // 设置尺寸适配
    // if (data) {
    //     cardRef.value.style.transform = `rotate(${90}deg)`
    //     cardRef.value.style.transformOrigin = 'center center'
    // } else {
    //     cardRef.value.style.transform = `rotate(${0}deg)`
    //     cardRef.value.style.transformOrigin = 'center center'
    // }
    // screen 需要设置成动态宽高
    // 角度旋转

}

const getScreenRate = (rate) => {
  screenRate.value = rate
  orientationRevd(rotation.value)
  cardStyle.value.width = Math.floor(570/rate)
}

const adjustConnect = () => {
  connection.sendOpr("device/connect")
  connection.sendOpr("keyboard/release")
}

onMounted(()=>{
})

onBeforeUnmount(() => {
  connection.closeConnection()
})

defineExpose({
  adjustConnect
})

</script>
<template>
  <div class="card-container">
    <div class="card" ref="cardRef" :loading="loading" :style="{transform: `translate(-50%, -50%) rotate(${rotation*90}deg)`, width: `${cardStyle.width}px`, height: `${cardStyle.height}px`}">
      <div class="btn1"></div>
      <div class="btn2"></div>
      <div class="btn3"></div>
      <div class="btn4"></div>
      <div class="top">
        <div class="camera">
          <div class="int"></div>
        </div>
        <div class="speaker"></div>
      </div>
      <div class="card-int" v-if="!showScreen">
        <div class="hello">
          请输入邀请码
          <InviteCode @inputComplete="inviteCodeInputed"></InviteCode>
        </div>
      </div>
    </div>
    <VideoPlayer :stream="stream" :rotation="rotation" :rtt="rtt" @getScreenRate="getScreenRate" @degChanged="degChanged" @oprcallback="sendOpr" v-if="showScreen"></VideoPlayer>
  </div>
</template>
